<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>添加景点</title>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <span> {{ message }} </span>
                <form>
                    <select class="form-control" v-model="place.provinceid">
                        <option v-for="(province,index) in provinces" :key="index">{{ province }} </option>
                    </select>

                    <div class="form-group">
                        <label for="place">景点名称</label>
                        <input type="text" class="form-control" id="place" placeholder="请输入景点名称" v-model="place.name">
                    </div>
                    <div class="form-group">
                        <label for="picture">景点图片</label>
                        <input type="file" id="picture" ref="myFile">
                        <p class="help-block">在这里上传图片哦！</p>
                    </div>
                    <div class="form-group">
                        <label for="hottime">旺季时间</label>
                        <input type="text" class="form-control" id="hottime" placeholder="请选择旺季时间" v-model="place.hottime">
                    </div>
                    <div class="form-group">
                        <label for="hotticket">旺季票价</label>
                        <input type="number" class="form-control" id="hotticket" placeholder="请输入旺季票价" v-model="place.hotticket">
                    </div>
                    <div class="form-group">
                        <label for="dimticket">淡季票价</label>
                        <input type="number" class="form-control" id="dimticket" placeholder="请输入淡季票价" v-model="place.dimticket">
                    </div>

                    <div class="form-group">
                        <label for="placedes">景点简介</label>
                        <input type="text" class="form-control" id="placedes" placeholder="请输入景点简介" v-model="place.placedes">
                    </div>


                    <button type="button" class="btn btn-success" @click="savePlace">添加</button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            place:{},
            message:"",
            provinces:[],
        },
        methods:{
            savePlace(){
                let _this = this;
                let myfile = _this.$refs.myFile;
                let  files = myfile.files;
                let file = files[0];
                let formData = new FormData();
                formData.append("file",file);
                // formData.append("id",null);
                formData.append("name",_this.place.name);
                formData.append("hottime",_this.place.hottime);
                formData.append("hotticket",_this.place.hotticket);
                formData.append("dimticket",_this.place.dimticket);
                formData.append("provinceid",_this.place.provinceid);
                formData.append("placedes",_this.place.placedes);
                console.log(_this.place);
                axios({
                    method:'post',
                    url:'http://localhost:9999/place/save',
                    data:formData,
                    headers:{
                        'Content-Type':'multipart/form-data',
                    }
                }).then(function (response) {
                    if (!response.data.flag){
                        _this.message = response.data.message;
                    }else{
                        location.href="placeList.html";
                    }
                });
            },
            findProvinces(){
                let _this = this;
                axios.get("http://localhost:9999/place/findProvinces").then(function (response) {
                    if (response.data.flag){
                        _this.provinces = response.data.provincesName;
                    }else{
                        _this.message = response.data.message;
                    }
                })
            }

        },
        created(){
            this.findProvinces();
        }

    });
</script>